import React ,{useEffect,useState} from 'react'
import {useObserver} from 'mobx-react-lite'
import useStore from '../context/useStore'
import {MineItem} from '../untils/interface'
import './mine.scss'
import {useHistory} from 'react-router-dom'
const Mine:React.FC=()=>{
    let {mine}=useStore()
    // let [list,setList]=useState<MineItem>(Object)
    let history=useHistory()
    useEffect(()=>{
        mine.getInfo()
    },[])
    //点击我的服务时
    async function gologin() {
        history.push({
            pathname:'/index/my',
            state:{...mine.info}
        })
    }
    return useObserver(()=>
        <div className='my' onClick={gologin}>
            <div className='header'>
                <div className="img">
                    <img src= {(mine.info as MineItem).avatar} alt=""/>
                </div>
                <div className="myBody">
                    <p> {(mine.info as MineItem).nickname}</p>
                    <p> {(mine.info as MineItem).mobile}</p>
                </div>
                <div className="myDetail">
                    {
                        '>'
                    }
                </div>
            </div>
            <h3 >我的服务</h3>
        </div>
    )
}
export default Mine